<template>
	<div class="containerAll discountCouponC">
		<div :class="topClass" @click="choiceCoupon">
			<p class="topP">
				<span>￥</span><span class="price">{{item.couponAmount|priceSplitTwo()}}</span>
			</p>
			<p class="bottomP">{{item.couponTitle}}</p>
		</div>
		<div :class="bottomClass" @click="detailStatus">
			<p class="bottomP">
				<span>有效期至：{{item.endTime}}</span>
				<span class="right clearFloat">
					查看详情
					<img :src="!detail?'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/find_right_down.png':'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/find_right_up.png '"/>
				</span>
			</p>
		</div>
		<div v-show="detail" class="detail">
			<p>{{item.couponDesc}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		props:["topClass","bottomClass",'item'],
		data (){
			return {
				detail: false
			}
		}
		,methods: {
			detailStatus () {
				this.detail = !this.detail;
			}
			,choiceCoupon() {
				this.$emit("choiceCouponParent");
			}
		}
		,filters:{
			priceSplitTwo (price) {
				if(price){
		          return price.toString().slice(0,price.toString().length-2);
		        }
		        return "0";
			}
	      ,fixedTwo(price){
	        if(price){
	          return Number(price/100).toFixed(2);
	        }
	        return "0.00";
	      }
	    }
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import '../../assets/less/index.less';
	.discountCouponC {
		width: 100%;
		min-height: 2.33rem;
		.topNoUsed{
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg.png) no-repeat 0 0;
		}
		.topUsed{
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg2.png) no-repeat 0 0;
		}
		.topExpire{
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg3.png) no-repeat 0 0;
		}
		.topNoUsed,.topUsed,.topExpire {
			height: 1.64rem;
			
			background-size: 100% 100%;
			color: #464646;
			font-size: .36rem;
			.topP{
				padding: .16rem .3rem 0 .3rem;
				.price{
					font-size: .72rem;
				}
			}
			.bottomP{
				margin-top: -.08rem;
				font-size: .24rem;
				padding: 0 .3rem;
			}
		}
		.bottomNoUsed{
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ba2.png) no-repeat 0 0;
		}
		.bottomUsed{
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg.png) no-repeat 0 0;
		}
		.bottomExpire{
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ba2.png) no-repeat 0 0;
		}
		.bottomNoUsed,.bottomUsed,.bottomExpire{
			height: .33rem;
			
			background-size: 100% 100%;
			color: #909090;
			font-size: .24rem;
			padding: .18rem .3rem;
			img{
				vertical-align: bottom;
				width: .28rem;
				height: .28rem;
			}
		}
		.detail{
			font-size: .24rem;
			border-radius:  0 0 .1rem .1rem;
			background: #FFFFFF;
			padding: 0 .3rem .18rem;
			p{
				color: #909090;
				padding-top: .18rem;
				border-top: 1px solid #F2F2F2;
			}
		}
	}
</style>